<!-- 表单 》 开关 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <!-- 复选 -->
    <el-checkbox v-if="isCheckbox" v-model="model" v-bind="commonProps" @change="emitChange">
      {{ text }}
    </el-checkbox>

    <!-- 开关 -->
    <el-switch v-else v-model="model" v-bind="switchProps" @change="emitChange" />
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixForm from '../mixForm'

const name = 'FormSwitch'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: false, // 内部绑定值
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 开关属性
     */
    switchProps() {
      const { commonProps, className, text, trueText, falseText, switchWidth } = this
      const showStr = text || (trueText && falseText) ? ` ${className}-showText` : ''
      return {
        ...commonProps,
        class: `${className}${showStr}`,
        width: switchWidth,
        activeText: text || trueText,
        inactiveText: text || falseText,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否逻辑不等 (如不等则调用 setModel() ) (可覆盖)
     */
    isDiff() {
      const { obj, prop, model, trueValue, falseValue } = this
      const value = obj[prop]

      // 真值
      if (value === trueValue) return !model

      // 假值
      if (value === falseValue) return model

      // 其他值
      return true
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, init, initTrue, initFalse, trueValue, falseValue, EMPTY } = this
      const value = obj[prop]

      // 真值
      if (value === trueValue) this.model = true

      // 假值
      else if (value === falseValue) this.model = false

      // 其他值
      else {
        if (init === trueValue) this.model = true
        else if (init === falseValue) this.model = false
        else if (initTrue) this.model = true
        else if (initFalse) this.model = false
        else this.model = EMPTY
      }
    },

    /**
     * 获取最终回传值 (可覆盖)
     */
    getValue() {
      const { model, EMPTY, trueValue, falseValue } = this
      return model === EMPTY ? EMPTY : model ? trueValue : falseValue
    },
  },
}
</script>
